<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" 
	content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title>餐饮网站-热卖商品推荐-俞健澄</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
    <style type="text/css">
    	 body,h3,h6{
    	 	font-family: "microsoft yahei";
    	 }
    	 .hot h3 {
    margin-top: -20px;
    color: #1A1A1A;
    font-size: 1.5em;
    font-weight: 600;
    margin: 0 0 1em;
    padding: 0 0 0.5em;
    border-bottom: 2px solid #eee;
}
.hot p {
    color: #5fa022;;
    font-size: 1em;
    font-weight: 400;
    line-height: 1.8em;
    margin: 1em 0;
}
.hot {
    padding: 3em 0;
    border: 1px solid #eee;
    margin: 0 0;
}
.hot h6 {
    color: #C15162;
    font-size: 1.5em;
    font-weight: 400;
    margin: 0.3em 0;
}
a.morebtn {
    display: block;
    font-size: 1em;
    color: #FFF;
    text-decoration: none;
    font-weight: 400;
    background: #D96B66;
    padding: 10px 18px;
    transition: 0.5s all ease;
    -webkit-transition: 0.5s all ease;
    border-radius: 3px;
    -webkit-border-radius: 3px;
}
a.morebtn:hover{
    background:  #5fa022;
}
@media (max-width: 1024px) {
    a.morebtn{
        max-width:410px;
    }
}
    </style>
	</head>
	<body>
		<!-- 热卖商品 -->
<div class="hot">
    <div class="container">
        <div class="col-md-4 ">
            <h3>米西奈斯煎饼</h3>
            <img src="images/4.jpg" class="img-responsive" alt="">
            <div>
                <p class="glyphicon glyphicon-thumbs-up">两种口味可供选择 </p>
                <div class="cur">
                        <span ><a class="morebtn" href="#">添加到购物车</a></span>
                        <span><h6>一口价 ：￥45.00</h6></span>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <h3>蒙特斯大虾</h3>
            <img src="images/1.jpg" class="img-responsive" alt="蒙特斯大虾">
            <div>
                <p class="glyphicon glyphicon-thumbs-up">两种口味可供选择 </p>
                <div class="cur">
                            <span><a class="morebtn" href="#">添加到购物车</a></span>
                            <span><h6>一口价 ：￥55.00</h6></span>
                    </div>
                </div>
        </div>
        <div class="col-md-4">
            <h3>香酥鸡排</h3>
            <img src="images/3.jpg" class="img-responsive" alt="香酥鸡排">
            <div>
                <p class="glyphicon glyphicon-thumbs-up">两种口味可供选择 </p>
                <div class="cur">
                       <span><a class="morebtn " href="#">添加到购物车</a></span>
                        <span><h6>一口价 ：￥65.00</h6></span>
                </div>
            </div>
        </div>
    </div>
</div>
<!--热卖商品结束 -->
		<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="UTF-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="UTF-8"></script>
	</body>
</html>
